<template>
    <div class="nav-all">
        <van-nav-bar :title="props.title" left-arrow @click-left="goBack" class="navbar">
            <template #right>
                <van-icon :name="props.uname2" size="18" @click="searchon(paths)" />&nbsp;&nbsp;&nbsp;
                <van-icon :name="props.uname3" size="18" />&nbsp;&nbsp;&nbsp;
                <van-icon :name="props.uname" size="18" @click="searchon(paths)" />
            </template>
        </van-nav-bar>
        <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" @select="onSelect" />
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router'
import { showToast } from 'vant';

const router = useRouter()

const props = defineProps({
    title: {
        type: String,
        required: true
    },
    uname: {
        type: String,
        required: true
    },
    uname2: {
        type: String,
    },
    uname3: {
        type: String,
    },
    paths: {
        type: String,
        required: true
    }
});

const goBack = () => {
    //   window.history.back();
    router.back();
};

const showShare = ref(false);
const options = [
    [
        { name: '微信', icon: 'wechat' },
        { name: '朋友圈', icon: 'wechat-moments' },
        { name: '微博', icon: 'weibo' },
        { name: 'QQ', icon: 'qq' },
    ],
    [
        { name: '已复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
        { name: '小程序码', icon: 'weapp-qrcode' },
    ],
];

const onSelect = (option) => {
    switch (option.name) {
        case '已复制链接':
            // 模拟 输入框
            var cInput = document.createElement("input");
            cInput.value = window.location.href;
            document.body.appendChild(cInput);
            cInput.select(); // 选取文本框内容
            // 执行浏览器复制命令
            // 复制命令会将当前选中的内容复制到剪切板中（这里就是创建的input标签）
            // Input要在正常的编辑状态下原生复制方法才会生效
            document.execCommand("copy");
            // 复制成功后再将构造的标签 移除
            document.body.removeChild(cInput);
            ; break;
        case '分享海报': console.log('分享海报'); break;
        case '二维码': console.log('二维码'); break;
    }
    showToast(option.name);
    showShare.value = false;
};

const searchon = (dx) => {
    if (dx) {
        router.push(dx)
    } else {
        showShare.value = true
        // console.log(window.location.href);
    }
}
</script>

<style lang="scss" scoped>
.nav-all {
    overflow: hidden;
    margin-bottom: 45px;

    .navbar {
        position: fixed;
        top: 0;
        width: 100%;
        background-color: #fff;
    }
}
</style>
